<div gather-step class="step step-gather panel panel-default step-{{step.name}}">
	<div class="panel-heading">
		<step-heading></step-heading>		</div>
	<div class="panel-body" ng-hide='step.iface.isCollapsed'>
		<div class="row">
			<div class="col-md-6">
				<h4>{{'gatherStepPromptLabel' | translate}}</h4>
				<p>{{'gatherStepDescriptionLabel1' | translate}} <em>{{'gatherStepDescriptionLabel2' | translate}}</em> {{'gatherStepDescriptionLabel3' | translate}}</p>
				<small>
					<!-- <div class='sortable-steps nested' sortable-steps> -->
					<div cly-reporter id="gather-nested-listing" basic-sortable  list-model="step.steps" class='steps nested-steps' item-added='addStep'>
						<div class='step' ng-repeat='step in step.steps'>
							<div ng-switch on="step.kind">
								<div ng-switch-when="say">
									<ng-include src="'templates/steps/sayStep.html'"></ng-include>
								</div>
								<div ng-switch-when="play">
									<ng-include src="'templates/steps/playStep.html'"></ng-include>
								</div>
							</div>
						</div>
					</div>
					<!--
                    <div class='step' step list-model='node.steps'  ng-repeat='step in node.steps'>
                        <ng-include src="'templates/' + step.kind + 'Step.html'"></ng-include>
                    </div>
                     -->

				</small>
			</div>
			<div class="col-md-6">
				<h4>{{'gatherStepCreateMenuLabel' | translate}}</h4>
				<div ng-show="!step.iface.advancedView">
					<div class="form-group">
						<label class="radio-inline"><input type="radio" ng-model="step.gatherType" value="menu"> {{'gatherStepMenuInput' | translate}} </label>
						<label class="radio-inline"><input type="radio" ng-model="step.gatherType" value="collectdigits"> {{'gatherStepCollectDigitsInput' | translate}} </label>
						<!-- <input type="radio" ng-model="step.gatherType" value="custom"> Custom -->
					</div>
					<div ng-if="step.gatherType=='menu'">
						<div ng-show="!step.inputType || step.inputType == 'dtmf' || step.inputType == 'dtmf speech'">
							<label>{{'Digits mapping' | translate}}</label>
							<div ng-repeat="mapping in step.menu.mappings" class='form-group row'>
								<form name="form" novalidate>
									<div class='col-md-4'>

										<div class="input-group input-group-sm">
											<span class="input-group-addon">{{'gatherStepDigitLabel' | translate}}</span>
											<input name="digits" class="form-control ng-pristine ng-valid ng-valid-pattern" type="text" placeholder="{{'gatherStepDigitInputPlaceholder' | translate}}" ng-pattern="/^[0-9*#ABCD]+$/" ng-model='mapping.digits' required title="{{'gatherStepDigitTooltip' | translate}}"></input>
										</div>
										<div class="validation-error"  ng-show="form.digits.$invalid">{{'gatherStepDigitValidationErrorLabel' | translate}}</div>


									</div>
									<div class='col-md-6'>
										<div class="input-group input-group-sm">
											<span class="input-group-addon">{{'gatherStepTargetLabel' | translate}}</span>
											<select sync-model name="next" ng-model='mapping.next' ng-options='target.name as target.label for target in getAllTargets()' class="form-control input-sm" required>
												<option value=""></option>
											</select>
										</div>
										<div class="validation-error" ng-show="form.next.$invalid">{{'gatherStepNoTargetLabel' | translate}}</div>
									</div>
									<div class='col-md-1'>
										<button ng-click="removeGatherMapping(step,mapping)" type="button" class="close" aria-hidden="true">&times;</button>
									</div>
								</form>
							</div>
							<div class="form-group">
								<button ng-click="addGatherMapping(step)" type="button" class="btn btn-primary btn-xs"><span>{{'gatherStepAddMappingButton' | translate}}</span></button>
							</div>
						</div>
						<div ng-show="step.inputType=='speech' || step.inputType=='dtmf speech'">
							<label>{{'Speech mapping' | translate}}</label>
							<div ng-repeat="mapping in step.menu.speechMappings" class='form-group row'>
								<form name="form" novalidate>
									<div class="container-fluid">
										<div class="form-group">
											<div class="input-group input-group-sm">
												<span class="input-group-addon">{{'Text' | translate}}</span>
												<input name="key" class="form-control ng-pristine ng-valid" type="text" placeholder="{{'some text or regex' | translate}}" ng-model='mapping.key' required title=""></input>
											</div>
											<div class="validation-error"  ng-show="form.key.$invalid">{{'Invalid mapping key' | translate}}</div>
										</div>
										<div class="row">
											<div class='col-md-11'>
												<div class="input-group input-group-sm">
													<span class="input-group-addon">{{'gatherStepTargetLabel' | translate}}</span>
													<select sync-model name="next" ng-model='mapping.next' ng-options='target.name as target.label for target in getAllTargets()' class="form-control input-sm" required>
														<option value=""></option>
													</select>
												</div>
												<div class="validation-error" ng-show="form.next.$invalid">{{'gatherStepNoTargetLabel' | translate}}</div>
											</div>
											<div class='col-md-1'>
												<button ng-click="removeSpeechGatherMapping(step,mapping)" type="button" class="close" aria-hidden="true">&times;</button>
											</div>
										</div>
									</div>
								</form>
							</div>
							<div class="form-group">
								<button ng-click="addSpeechGatherMapping(step)" type="button" class="btn btn-primary btn-xs"><span>{{'gatherStepAddMappingButton' | translate}}</span></button>
							</div>
						</div>
					</div>
					<div ng-if="step.gatherType=='collectdigits' && step.inputType!='speech'">
						<label>{{'Digits variable' | translate}}</label>
						<form name="form" novalidate>
							<div class='form-group row'>
								<div class='col-md-12'>
									<div class="input-group">
										<span class="input-group-addon">{{'gatherStepAssignToLabel' | translate}}</span>
										<input rvd-variable='step.collectdigits.collectVariable' ng-model="step.collectdigits.collectVariable" ng-pattern="/^[A-Za-z]+[A-Za-z0-9_]*$/" name='collectVariable' class="form-control ng-pristine ng-valid ng-valid-pattern" type="text" placeholder="{{'gatherStepAssignToInputPlaceholder' | translate}}"   required></input>
										<span class="input-group-addon">{{'gatherStepScopeLabel' | translate}}</span>
										<select ng-model='step.collectdigits.scope' class="form-control">
											<option value='module'>{{'gatherStepScopeSelectOption1' | translate}}</option>
											<option value='application'>{{'gatherStepScopeSelectOption2' | translate}}</option>
										</select>
									</div>
									<div class="validation-error" ng-show="form.collectVariable.$invalid">{{'gatherStepInvalidVariableErrorLabel' | translate}}</div>
								</div>
							</div>
							<div class='form-group row'>
								<div class='col-md-12'>
									<div class="input-group">
										<span class="input-group-addon">{{'gatherStepContinueToLabel' | translate}}</span>
										<select sync-model name='next' ng-model='step.collectdigits.next' ng-options='target.name as target.label for target in getAllTargets()' required class="form-control">
											<option value=""></option>
										</select>
									</div>
									<div class="validation-error" ng-show="form.next.$invalid">{{'gatherStepChooseTargetLabel' | translate}}</div>
								</div>

							</div>
						</form>
					</div>

					<div ng-if="step.gatherType=='collectdigits' && (step.inputType=='speech' || step.inputType=='dtmf speech') ">
						<label>{{'Speech variable' | translate}}</label>
						<form name="form" novalidate>
							<div class='form-group row'>
								<div class='col-md-12'>
									<div class="input-group">
										<span class="input-group-addon">{{'gatherStepAssignToLabel' | translate}}</span>
										<input rvd-variable='step.collectspeech.collectVariable' ng-model="step.collectspeech.collectVariable" ng-pattern="/^[A-Za-z]+[A-Za-z0-9_]*$/" name='collectVariable' class="form-control ng-pristine ng-valid ng-valid-pattern" type="text" placeholder="{{'gatherStepAssignToInputPlaceholder' | translate}}"   required></input>
										<span class="input-group-addon">{{'gatherStepScopeLabel' | translate}}</span>
										<select ng-model='step.collectspeech.scope' class="form-control">
											<option value='module'>{{'gatherStepScopeSelectOption1' | translate}}</option>
											<option value='application'>{{'gatherStepScopeSelectOption2' | translate}}</option>
										</select>
									</div>
									<div class="validation-error" ng-show="form.collectVariable.$invalid">{{'gatherStepInvalidVariableErrorLabel' | translate}}</div>
								</div>
							</div>
							<div class='form-group row'>
								<div class='col-md-12'>
									<div class="input-group">
										<span class="input-group-addon">{{'gatherStepContinueToLabel' | translate}}</span>
										<select sync-model name='next' ng-model='step.collectspeech.next' ng-options='target.name as target.label for target in getAllTargets()' required class="form-control">
											<option value=""></option>
										</select>
									</div>
									<div class="validation-error" ng-show="form.next.$invalid">{{'gatherStepChooseTargetLabel' | translate}}</div>
								</div>

							</div>
						</form>
					</div>

					<!-- dtmf validation -->
					<div ng-show="!step.inputType || step.inputType=='dtmf'">
						<h4>{{'gatherStepValidationLabel' | translate}}</h4>
						<div ng-show="step.gatherType=='collectdigits'" class="form-group">
							<div class="input-group">
									<span class="input-group-addon help-tooltip"  tooltip="{{'gatherStepValidationPatternTooltip' | translate}}" tooltip-trigger='mouseenter' tooltip-popup-delay='1000'>
										{{'gatherStepValidationPatternLabel' | translate}}
									</span>
								<input ng-if='getEffectiveValidationType(step.validation)=="Regex"' ng-model='step.validation.regexPattern' class="form-control">
								<input ng-if='getEffectiveValidationType(step.validation)=="One of"' ng-model='step.validation.userPattern' class="form-control">
								<div class="input-group-btn">
									<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
										{{getEffectiveValidationType(step.validation)}}
										<span class="caret"></span>
									</button>
									<ul class="dropdown-menu pull-right" role="menu">
										<li><a ng-click='setValidationTypeOneOf(step.validation)'>{{'gatherStepValidationPatternOption1' | translate}}</a></li>
										<li><a ng-click='setValidationTypeRegex(step.validation)'>{{'gatherStepValidationPatternOption2' | translate}}</a></li>
									</ul>
								</div>
							</div>
							<div ng-show="step.inputType=='dtmf' && !!step.numDigits && (!!step.validation.userPattern || !!step.validation.regexPattern)" class="validation-warning row">
								<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1"><i class="fa fa-warning step-warning-icon"></i></div>
								<div class="col-lg-10 col-md-10 com-sm-10 col-xs-10"> <span translate="gatherStepNumberOfDigitsConflictWarning"></span></div>
							</div>
						</div>

						<label>{{'gatherStepSayInvalidLabel' | translate}}</label>
						<div class="row">
							<div class="col-md-12">
								<div class="form-group">
									<textarea ng-model='step.invalidMessage.phrase' type="text" class="form-control" placeholder="{{'gatherStepSayInvalidPlaceholder' | translate}}"></textarea>
								</div>
							</div>
							<div class="col-md-6">
								<div class="input-group">
									<span class="input-group-addon ">{{'sayStepLanguageLabel' | translate}}</span>
									<select ng-model='step.invalidMessage.language' auto-clear ng-options='language.name as language.text for language in languages'  class="form-control say-language-dropdown" >
										<option value=""></option>
									</select>
								</div>
							</div>
						</div>
					</div>
					<!-- speech validation -->
					<div ng-show="step.inputType=='speech'">
						<h4>{{'gatherStepValidationLabel' | translate}}</h4>
						<div ng-show="step.gatherType=='collectdigits'" class="form-group">
							<div class="input-group">
									<span class="input-group-addon help-tooltip"  tooltip="{{'gatherStepValidationPatternTooltip' | translate}}" tooltip-trigger='mouseenter' tooltip-popup-delay='1000'>
										{{'gatherStepValidationPatternLabel' | translate}}
									</span>
								<input ng-if='getEffectiveValidationType(step.speechValidation)=="Regex"' ng-model='step.speechValidation.regexPattern' class="form-control">
								<div class="input-group-btn">
									<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
										{{getEffectiveValidationType(step.speechValidation)}}
										<span class="caret"></span>
									</button>
									<ul class="dropdown-menu pull-right" role="menu">
										<li><a ng-click='setValidationTypeRegex(step.speechValidation)'>{{'gatherStepValidationPatternOption2' | translate}}</a></li>
									</ul>
								</div>
							</div>
						</div>

						<label>{{'gatherStepSayInvalidLabel' | translate}}</label>
						<div class="row">
							<div class="col-md-12">
								<div class="form-group">
									<textarea ng-model='step.speechInvalidMessage.phrase' type="text" class="form-control" placeholder="{{'gatherStepSayInvalidPlaceholder' | translate}}"></textarea>
								</div>
							</div>
							<div class="col-md-6">
								<div class="input-group">
									<span class="input-group-addon ">{{'sayStepLanguageLabel' | translate}}</span>
									<select ng-model='step.speechInvalidMessage.language' auto-clear ng-options='language.name as language.text for language in languages'  class="form-control say-language-dropdown" >
										<option value=""></option>
									</select>
								</div>
							</div>
						</div>
									<!--<div basic-droppable drop-model='step.invalidInputStep' drop-accept='.verb-button.button-say' style="width:50px; height:100px; background-color:grey;">
                        </div>-->
					</div>


				</div>
				<!--
                <div ng-show="step.iface.advancedView">
                    <div class="form-group">
                        <label for="actionURL">Action URL</label>
                        <input ng-model='step.action' type="url" id="actionURL" class="form-control" placeholder="http://server/action.php" required>
                        <span class="help-block">An absolute or relative URL that will receive the digits</span>
                    </div>
                    <div class="form-group">
                        <label for="actionMethod">Method</label>
                        <select ng-model='step.method' ng-options='method for method in methods' id='actionMethod' class='form-control'></select>
                    </div>
                </div>
                 -->
				<!-- <span class="glyphicon glyphicon-wrench">&nbsp;</span><a ng-click="step.iface.advancedView = !step.iface.advancedView"><span ng-show="!step.iface.advancedView">Advanced view</span><span ng-show="step.iface.advancedView">Basic view</span></a> -->
			</div>

		</div>

		<div class="rvd-spacer10"></div>
		<i ng-click="step.iface.optionsVisible = !step.iface.optionsVisible" class='fa fa-cog rvd-clickable' ng-class="{'rvd-active': step.iface.optionsVisible }"></i>
		<div ng-show="step.iface.optionsVisible">
			<div class="panel-group">
				<label class="radio-inline"><input type="radio" ng-model="step.inputType" value="dtmf">{{'DTMF' | translate}}</label>
				<label  class="radio-inline">
					<input type="radio"  ng-disabled='!facAsr'  ng-model="step.inputType" value="speech">{{'Speech' | translate}}
					&nbsp;<span class="fac-warning-icon"><i ng-show="!facAsr" class="fa fa-warning" ng-class="{'fac-warning-serious': (step.inputType == 'speech' && !facAsr) }" tooltip="Speech capabilities not available" tooltip-trigger="mouseenter"></i></span>
				</label>
				<!-- hybrid input not supported  yet
				<label class="radio-inline"><input type="radio" ng-model="step.inputType" value="dtmf speech">{{'DTMF and Speech' | translate}}</label>
				-->
			</div>

			<div class="panel-group" ng-show="step.inputType != 'dtmf'">
				<div class="col-lg-5  form-group input-group language">
					<span class="input-group-addon ">{{'sayStepLanguageLabel' | translate}}</span>
					<select ng-model='step.language' auto-clear ng-options='language.name as language.text for language in languagesGather'  id="languageSelect" class="form-control say-language-dropdown" >
						<option value=""></option>
					</select>
				</div>
			</div>

			<div class="panel-group" ng-show="step.inputType != 'dtmf'">
				<form name="form" novalidate>
					<h4>{{'Hot words' | translate}}</h4>
					<textarea name="hints" ng-model='step.hints' type="text" class="form-control" placeholder="{{'Hot words placeholder' | translate}}" validate-hints></textarea>
					<div class="validation-error"  ng-show="form.hints.$invalid">{{'hintsLimitExceeded' | translate}}</div>
				</form>
			</div>

			<div class="row">
				<!--
                <div class="form-group col-lg-3">
                    <label for="gatherTimeout">Timeout</label>
                    <input ng-model='step.timeout' type="number" id="gatherTimeout" class="form-control" placeholder="5" tooltip-placement='left' tooltip='Time (in seconds) to wait for the caller to press another digit'>
                </div>
                -->
				<div class="col-lg-3">
					<div class="input-group input-group-sm">
					<span class="input-group-addon">{{'gatherStepFinishLabel' | translate}}</span>
					<input ng-model='step.finishOnKey' auto-clear ng-pattern='/^[0-9\#\*]$/' type="text" class="form-control" placeholder="{{'gatherStepFinishPlaceholder' | translate}}">

					</div>
				</div>

				<!--
                <div class="form-group col-lg-3">
                    <label for="finishOnKey">Finish on key</label>
                    <input ng-model='step.finishOnKey' id='finishOnKey' type='text' ng-pattern='/^[0-9\#\*]$/' class='form-control' tooltip="The 'finishOnKey' attribute lets you choose one value that submits the received data when entered. For example, if you set 'finishOnKey' to '#' and the user enters '1234#'">
                </div>
                -->
				<div class="col-lg-3" ng-show="step.inputType != 'speech'">
					<div class="input-group input-group-sm">
						<span class="input-group-addon">{{'gatherStepNumberDigitsLabel' | translate}}</span>
						<input ng-model='step.numDigits' auto-clear ng-pattern='/^[0-9\#\*]{1,2}$/' type="number" class="form-control" placeholder="{{'gatherStepNumberDigitsPlaceholder' | translate}}"/>
					</div>
					<div ng-show="!!step.numDigits && (!!step.validation.userPattern || !!step.validation.regexPattern)" class="validation-warning row">
						<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1"><i class="fa fa-warning step-warning-icon"></i></div>
						<div class="col-lg-10 col-md-10 com-sm-10 col-xs-10"> <span translate="gatherStepValidationConflictWarning"></span> </div>
					</div>
				</div>

				<div class="form-group col-lg-3">
					<div class="input-group input-group-sm">
						<span class="input-group-addon">{{'Timeout' | translate}}</span>
						<input ng-model='step.timeout' auto-clear type="number" id="gatherTimeout" class="form-control mask-invalid" placeholder="5" title="{{'gatherTimeoutTooltip' | translate}}">
					</div>
				</div>
			</div>

			<div class="row" ng-show="step.inputType != 'dtmf'">

				<!--
				<div class="col-lg-7">
					<h4>{{'partialResultCallback' | translate}}</h4>
					<input ng-model='step.partialResultCallback' auto-clear type="text" id="partialURL" class="form-control">
				</div>
				<div class="col-lg-7" ng-show="step.partialResultCallback != ''">
					<h4>{{'partialResultCallbackMethod' | translate}}</h4>
					<select ng-model='step.partialResultCallbackMethod' ng-options='method for method in methods' id='partialMethod' class='form-control'/>
				</div>
				-->

				<div class="col-md-12">
					<div class="input-group">
						<span class="input-group-addon">{{'partialResultCallback' | translate}}</span>
						<input ng-model='step.partialResultCallback' auto-clear type="text" id="partialURL" class="form-control mask-invalid">
						<span class='input-group-addon'>{{'Method' | translate}}</span>
						<select name="method" ng-model='step.partialResultCallbackMethod' ng-options='method for method in methods' auto-clear class="form-control mask-invalid">
							<option value=""></option>
						</select>
					</div>
				</div>



				<!--
                <div class="form-group col-lg-3">
                    <label for="numDigits">Number of digits</label>
                    <input ng-model='step.numDigits' id='numDigits' type='number' class='form-control' tooltip="The 'numDigits' attribute lets you set the number of digits you are expecting, and submits the data to the 'action' URL once the caller enters that number of digits.">
                </div>
                -->
			</div>
		</div>



	</div>
